import clsx from "clsx";
import { ButtonHTMLAttributes } from "react";
import styles from "./UiKit.module.css"

type UiButtonVariant = "primary" | "secondary" | "outlined";
export type UiButtonProps = {
    variant: UiButtonVariant;
} & ButtonHTMLAttributes<HTMLButtonElement>;

export function UiButton({ className, variant, ...props }: UiButtonProps) {
    return (
        <button
            {...props}
            className={clsx(
                className,
                styles.UiButton,
                {
                  [styles.primaryButton]: variant === "primary",
                  [styles.secondaryButton]: variant === "secondary",
                  [styles.outlinedButton]: variant === "outlined" ,
                }
              )}
        />
    );
}